<template>
	<div class="padding-container preview-wrap">
    <div class="title-part">
      <el-button size="mini" type="primary" class="pull-right" @click="invoiceInfo()">{{ $root.lang.userinfo.buyLog.invoice.invoiceInfo }}</el-button>
      <el-button size="mini" type="primary" class="lang-select pull-right" @click="toInvoice()">{{ $root.lang.userinfo.buyLog.invoice.toInvoice }}</el-button>
		</div>
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.userinfo.buyLog.order.orderNo">
        <el-input v-model="tableParams.orderNo"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.userinfo.buyLog.order.printInvoice">
        <el-select v-model="tableParams.printInvoice" :placeholder="$root.lang.userinfo.buyLog.order.select">
          <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in baseState.printInvoice"></el-option>        
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()" >{{ $root.lang.userinfo.buyLog.order.query }}</el-button>
        <el-button size="small" @click="searchAction(true)" >{{ $root.lang.userinfo.buyLog.order.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      :empty-text="$root.lang.userinfo.buyLog.order.noData"
      size="small"
      border
      style="width: 100%"
      @selection-change="choseDevice"
      >
      <el-table-column
        fixed="left"
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        width="80"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.amount">
        <template slot-scope="scope">
          <span>{{ scope.row.amount | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="250"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.orderNo">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="70"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.orderDesc">
        <template slot-scope="scope">
          <span>{{ scope.row.orderDesc | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.creTime">
        <template slot-scope="scope">
          <span>{{ scope.row.creTime | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.completionTime">
        <template slot-scope="scope">
          <p>{{ scope.row.completionTime | dateFormat }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.userinfo.buyLog.order.productDesc">
        <template slot-scope="scope">
          <span>{{ scope.row.productDesc | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.printInvoice">
        <template slot-scope="scope">
          <span>{{ baseState.printInvoice, scope.row.printInvoice, '--' | matchValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        align="center"
        :label="$root.lang.userinfo.buyLog.order.printInvoiceTime">
        <template slot-scope="scope">
          <span>{{ scope.row.printInvoiceTime | dateFormat }}</span>
        </template>
      </el-table-column>
    </el-table>

    <EditInvoice :show="showInvoice" @editReceive="getReceive" />
    <InvoicePreview :show="showPreview" :previewList="previewList" @editReceive="getReceive" @reload="fetchData" />
	</div>
</template>

<script>
import EditInvoice from './editInvoice'
import InvoicePreview from './invoicePreview'

import '@/options/baseState'
export default {
	name: 'OrderList',
  components: {
    EditInvoice, InvoicePreview
  },
	data() {
		return {
			showDialog:false,
			tableParams:{
				orderNo: null,
				payType: 0,
				orderType: 0,
        printInvoice: 0
			},
			listLoading: false,
      list:[],
      baseState: baseState,
      showInvoice: false,
      choseDataList: [],
      showPreview: false,
      previewList: [],
      selectIdList: []
		}
	},
  methods: {
    getReceive(data) {
      this[data.key] = data.value
    },
    reloadTable() {
      this.searchAction(true);
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          orderNo: null,
          payType: 0,
          orderType: 0,
          printInvoice: 0
        }
      } 
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/payment/invoice/page',
          method: 'post',
          data: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.list = response.result
          this.listLoading = false
        }).catch(error => {
          this.list = []
          this.listLoading = false
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
      })
    },
    invoiceInfo() {
      this.showInvoice = true
    },
    choseDevice(value) {
      this.choseDataList = value     
    },
    toInvoice() {
      if(this.choseDataList.length == 0) {
        this.$message({
          message: this.$root.lang.userinfo.buyLog.invoice.invoiceSelectTip,
          type: 'error',
          duration: 3 * 1000
        })
        return
      }
      this.selectIdList = []
      this.choseDataList.forEach((item) => {
        this.selectIdList.push(item.id)
      }) 
      let param = {
        orderIds: this.selectIdList
      }
      this.request({
          url: '/payment/invoice/preview',
          method: 'post',
          data: this.$root.optionProcess(param)
        }).then(response => {
          this.previewList = response.result
          this.showPreview = true
        }).catch(error => {
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size: 18px;
			padding-bottom: 20px;
		}
    .lang-select {
      margin-right: 10px;
      cursor: pointer;
    }
	}
</style>